<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div class="flex justify-end">
                <el-button type="success" @click="resetPageFun" style="margin-right: auto">刷新列表</el-button>
				<el-button type="primary" @click="videoRoom">
                    <router-link
                        :to="{
                            path: '/live/videos',
                            query: {
                                // id: row.id
                            }
                        }"
                    >
                        视频库
                    </router-link>
                </el-button>
                <el-button type="primary" @click="addRoom">添加直播间</el-button>
            </div>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
                <el-table
                    size="large"
                    :data="pager.lists"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
                >
<!--                    <el-table-column type="selection" width="60" />-->
                    <el-table-column label="ID详情" prop="channel_id">
                        <template #default="{ row }">
                            <div v-for="(item, index) in idInfo" :key="index">
                                <span>{{item.title}}：</span>
                                <span style="color: #2494f2">{{row[item.key]}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="直播间封面">
                        <template #default="{ row }">
                            <div class="flex items-center">
                                <div>
                                    <el-avatar :src="row.cover" style="height: 60px; min-width: 60px"/>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="直播间详情" prop="channel_id">
                        <template #default="{ row }">
                            <div v-for="(item, index) in liveInfo" :key="index">
                                <span>{{item.title}}：</span>
                                <span style="color: #2494f2">{{row[item.key]}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="code">
                        <template  #header>
                            <div class="flex flex-row gap-2">
                                <span>直播间状态</span>
                                <popover-input
                                        class="ml-[10px]"
                                        :type="'select'"
                                        :options="stateList"
                                        @confirm="handleEdit($event)"
                                >
                                    <el-button type="primary" link v-perms="['user:edit']">
                                        <icon name="el-icon-ArrowDown" />
                                    </el-button>
                                </popover-input>
                            </div>
                        </template>
                        <template #default="{ row }">
                            <el-tag class="ml-2" :type="['info', 'success', 'danger'][row.live_status-1]"
                            >{{row.status_name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="控制台链接" prop="url">
                        <template #default="{ row }">
                            <el-button v-if="row.url" type="success" @click="goRrl(row.url)">打开直播间</el-button>
<!--                            <el-link  type="primary" @click="goRrl(row.url)">点击打开控制台链接</el-link>-->
                            <span v-else>已结束</span>
                        </template>
                    </el-table-column>
<!--                    <el-table-column sortable label="控制台退出链接" prop="logout_url" min-width="200">-->
<!--                        <template #default="{ row }">-->
<!--&lt;!&ndash;                            <el-link v-if="row.logout_url" type="primary" @click="goRrl(row.logout_url)">点击打开控制台退出链接</el-link>&ndash;&gt;-->
<!--                            <el-button v-if="row.logout_url" type="primary" @click="returnRrl(row.logout_url)">关闭直播间</el-button>-->
<!--                            <span v-else>暂无链接</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="操作面板" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary">
                                <router-link
                                    :to="{
                                        path: '/live/editlive',
                                        query: {
                                            id: row.id
                                        }
                                    }"
                                >
                                    编辑
                                </router-link>
                            </el-button>
<!--							<el-button-->
<!--							    type="primary"-->
<!--							    link-->
<!--							    @click="toggleClick1(row.id)"-->
<!--							>-->
<!--							    商品管理-->
<!--							</el-button>-->
<!--							<el-button-->
<!--							    type="primary"-->
<!--							    link-->
<!--							    @click="handleSign(row.id)"-->
<!--							>-->
<!--							    点名奖励设置-->
<!--							</el-button>-->
                            <el-button
                                type="danger"
                                @click="handleDelete(row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <!-- 分页 -->
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <add-popup v-if="showAdd" ref="addRef" @success="getLists"  @close="showEdit = false" />
<!--		<CutPop v-if="showCutPop"  ref="editRef" ></CutPop>-->
<!--		<signPopup v-if="showSign" ref="signRef" @success="getLists" @close="showSign = false" />-->
        <el-dialog
            v-model="closeRoom"
            title="关闭直播间成功"
            width="100"
        >
<!--            <iframe :src="closeRoomUrl" style="display: none"></iframe>-->
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import {getRoomListMz, delRoomMz,seedVideo} from '@/api/live'
import { idInfo, liveInfo } from "./data.ts";
import feedback from '@/utils/feedback'
import {ref, reactive} from "vue";
import { getRoutePath } from '@/router'
import AddPopup from './add.vue'
// import  CutPop from "./component/live.vue";
// import signPopup from './component/sign.vue'



const queryParams = reactive({
    live_status: ''
});

//分页处理
const { pager, getLists } = usePaging({
    fetchFun: getRoomListMz,
    params: queryParams
});

getLists();

// 复选
const handleSelectionChange = (val: any[]) => {};

// 点名奖励设置
const signRef = shallowRef()
const showSign = ref(false)
const handleSign = async (id: string) => {
	showSign.value = true
	await nextTick()
	signRef.value?.open()
	signRef.value?.setFormData(id);
}

const addRef = shallowRef();
const showAdd = ref(false);


// 添加
const addRoom = async () => {
    showAdd.value = true;
    await nextTick();
    addRef.value?.open()
};

// const editRef = shallowRef<InstanceType<typeof CutPop>>();
// let showCutPop = ref(false);
// const toggleClick1 = async (id: string) => {
//     showCutPop.value = true;
//     await nextTick();
//     editRef.value?.open();
//     editRef.value?.setFormData(id);
// };

// 编辑
// const editFun = async (res:any) => {
//     showEdit.value = true;
//     await nextTick();
//     editRef.value?.open('edit', res.id);
//     editRef.value?.getDetail()
// };

// 查看详情
// const detailFun = async (res:any) => {
//     showEdit.value = true;
//     await nextTick();
//     editRef.value?.open('detail', res.id);
//     editRef.value?.getDetail()
// };





// 点击打开控制台链接
const goRrl = async (url:string) => {
    url ? window.open(url, '_blank') : feedback.msgError('暂无链接')
};
const videoRoom = async (url:string) => {
    // url ? window.open(await seedVideo().then(res => { return res.url; }), '_blank') : feedback.msgError('暂无链接')
};

// 关闭控制台链接
const closeRoom = ref(false);
const closeRoomUrl = ref('');
const returnRrl = async (url:string) => {
    closeRoomUrl.value = url;
    closeRoom.value = true;
};

// 删除
const handleDelete = async (res:any) => {
    await feedback.confirm('确定删除该直播间？');
    await delRoomMz({room_id: res.id});
    getLists()
}


// 直播间状态 1 未开播 2 直播中 3 已结束
const stateList = [
    {
        value: 1,
        label: '未开播',
    },
    {
        value: 2,
        label: '直播中',
    },
    {
        value: 3,
        label: '已结束',
    }
];
const handleEdit = (val:string, key:string) => {
    queryParams.live_status = val;
    getLists()
};

// 重置
const resetPageFun = () => {
    queryParams.live_status = '';
    getLists()
}

</script>

<style lang="scss" scope>
.ls-input {
    /*width: 100%;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    white-space: nowrap;
}
    .test {
        test2 {
            border: 1px yellow solid;
        }
    }
</style>
